<template>
  <div class="app-container">
    <el-form label-width="120px">
      <el-form-item label="公告名称">
        <el-input v-model="banner.title"/>
      </el-form-item>

      <el-form-item label="点击跳转链接">
        <el-input v-model="banner.linkUrl"  type="textarea"/>
      </el-form-item>

    <el-form-item label="公告图片">

        <!-- 头衔缩略图 -->
        <pan-thumb :image="banner.imageUrl"/>
        <!-- 文件上传按钮 -->
        <el-button type="primary" icon="el-icon-upload" @click="imagecropperShow=true">更换图片
        </el-button>
        <!--
    v-show：是否显示上传组件
    :key：类似于id，如果一个页面多个图片上传控件，可以做区分
    :url：后台上传的url地址
    @close：关闭上传组件
    @crop-upload-success：上传成功后的回调 -->
        <image-cropper
                    v-show="imagecropperShow"
                    :width="1100"
                    :height="480"
                    :key="imagecropperKey"
                    :url="BASE_API+'/oss/fileoss'"
                    field="file"
                    @close="close"
                    @crop-upload-success="cropSuccess"/>

    </el-form-item>

      <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import bannerApi from '@/api/manager/banner'
import ImageCropper from '@/components/ImageCropper'
import PanThumb from '@/components/PanThumb'
export default {
    components:{ImageCropper, PanThumb},
    data(){
        return{
            banner:{
            },
           imagecropperShow: false,
           imagecropperKey: 0,
            BASE_API: process.env.BASE_API,saveBtnDisabled: false}
    },
    created(){
        this.init()
    },
    watch:{ $route(to,from){ this.init()
        }
    },
    methods:{
        init(){
            this.banner = {}
        },
       saveOrUpdate(){
            this.saveBanner();
        },
       saveBanner(){
            bannerApi.addBanner(this.banner)
            .then(response => {
               this.$message({
                    type: 'success',
                    message: '保存成功!'
                });
               this.$router.push({path:'/banner/table'})
            })
            .catch()
        },
        close(){this.imagecropperShow = false
         this.imagecropperKey = this.imagecropperKey + 1
        },
        cropSuccess(data){
         // 上传后接口会返回图片地址
          console.log(data.url)
          this.banner.imageUrl = data.url
          this.imagecropperShow = false
          this.imagecropperKey = this.imagecropperKey + 1
        }
    }
}
</script>
